<template>
	<div class="vue_app SetKeyWallet" style="position: relative;width: 100%;">
		<my-header :title="'设置钱包支付密码'" :hasTitle="true" :hasBack="true"></my-header>
		<!--头部-->
		<ul class="aui-list aui-list-in">
			<li class="aui-list-item">
				<div class="aui-list-item-inner aui-list-item-arrow" @click="changeMaxMoney('account')">
					<div class="aui-list-item-title">免密最大金额</div>
					<div class="aui-list-item-right" v-model="account">{{account}}</div>
				</div>
			</li>
			<li class="aui-list-item">
				<div class="aui-list-item-inner aui-list-item-arrow" @click="setKeyWallet()">
					<div class="aui-list-item-title">支付密码</div>
				</div>
			</li>
		</ul>
		<!--免密最大金额更改-->
		<pull-scroll style="top: 7.4rem;text-align: left;" ref="pullscrollCover" @getaccountdata="getaccount" :list="accountlist"></pull-scroll>
		<!--设置钱包密码-->
		<div class="keyWallet" v-if="keyWallet">
			<div class="keyWalletcontant" :style="{'height':xxyPageHeight+'rem'}">
				<span class="closekeyWallet" @click="closekeyWallet()">x</span>
				<p class="title">支付密码设置</p>
				<div class="keydiv" v-if="walletStatus == 1">
					<p>输入旧密码</p>
					<div class="srinput">
						<!--<input type="password" maxlength="6" class="maxinput" v-model="keyall" ref="maxinput1" />-->
						<span class="maxinput" ref="maxinput1" @click="clickinputfn(3)"></span>
						<div class="mininput">
							<input type="password" maxlength="1" v-model="oldkey1" />
							<input type="password" maxlength="1" v-model="oldkey2" />
							<input type="password" maxlength="1" v-model="oldkey3" />
							<input type="password" maxlength="1" v-model="oldkey4" />
							<input type="password" maxlength="1" v-model="oldkey5" />
							<input type="password" maxlength="1" v-model="oldkey6" />
						</div>
					</div>
				</div>
				<!--<span class="solid"></span>-->
				<div class="keydiv">
					<p>输入支付密码</p>
					<div class="srinput">
						<!--<input type="password" maxlength="6" class="maxinput" v-model="keyall" ref="maxinput1" />-->
						<span class="maxinput" ref="maxinput1" @click="clickinputfn(1)"></span>
						<div class="mininput">
							<input type="password" maxlength="1" v-model="key1" />
							<input type="password" maxlength="1" v-model="key2" />
							<input type="password" maxlength="1" v-model="key3" />
							<input type="password" maxlength="1" v-model="key4" />
							<input type="password" maxlength="1" v-model="key5" />
							<input type="password" maxlength="1" v-model="key6" />
						</div>
					</div>
				</div>
				<!--<span class="solid"></span>-->
				<div class="keydiv">
					<p>再次输入支付密码</p>
					<div class="srinput">
						<!--<input type="password" maxlength="6" class="maxinput" v-model="Walletall" ref="maxinput2" />-->
						<span class="maxinput" ref="maxinput2" @click="clickinputfn(2)"></span>
						<div class="mininput">
							<input type="password" maxlength="1" v-model="Wallet1" />
							<input type="password" maxlength="1" v-model="Wallet2" />
							<input type="password" maxlength="1" v-model="Wallet3" />
							<input type="password" maxlength="1" v-model="Wallet4" />
							<input type="password" maxlength="1" v-model="Wallet5" />
							<input type="password" maxlength="1" v-model="Wallet6" />
						</div>
					</div>

				</div>
				<span class="sure" @click="successfn">确定</span>
			</div>
			<div class="keyWalletmask" :style="{'width': zxPageWidth+'px','height':zxPageHeight+'px'}"></div>
			<div class="myBox">
				<span>
				<div @touchstart.stop="getNum($event)">{{num1}}</div>
				<div @touchstart.stop="getNum($event)">{{num2}}</div>
				<div @touchstart.stop="getNum($event)">{{num3}}</div>
			</span>
				<span>
				<div @touchstart.stop="getNum($event)">{{num4}}</div>
				<div @touchstart.stop="getNum($event)">{{num5}}</div>
				<div @touchstart.stop="getNum($event)">{{num6}}</div>
			</span>
				<span>
				<div @touchstart.stop="getNum($event)">{{num7}}</div>
				<div @touchstart.stop="getNum($event)">{{num8}}</div>
				<div @touchstart.stop="getNum($event)">{{num9}}</div>
			</span>
				<span>
				<div class="zxsure" @touchstart.stop="shuffle([1,2,3,4,5,6,7,8,9,0])">随机键盘</div>
				<div @touchstart="getNum($event)" style="border-bottom: 1px solid #d2d2d2;">{{num0}}</div>
				<div class="del" @touchstart.stop="deletPassword">删除</div>
			</span>
			</div>
		</div>
	</div>
</template>

<script>
	import MyHeader from "../header";
	import axios from "axios";
	import { mapMutations, mapActions, mapGetters } from "vuex";
	import { MessageBox } from '@/ui-components';
	import pullScroll from "../../real-components/pullScroll";
	import { Toast } from '@/utils/toast';
	import MD5 from '../../utils/md5_wxh.js';
	import { reFreshUserInfo } from '../../utils/WXH/login.js'
	import { getUserInfoAgain } from '../../api/wxh/getData.js'
	export default {
		data() {
			return {
				account: "",
				accountlist: [],
				keyWallet: false,
				walletStatus: 0,
				//旧密码
				oldkey1: "",
				oldkey2: "",
				oldkey3: "",
				oldkey4: "",
				oldkey5: "",
				oldkey6: "",
				oldkeyall: "",
				//输入密码
				key1: "",
				key2: "",
				key3: "",
				key4: "",
				key5: "",
				key6: "",
				keyall: "",
				//确认密码
				Wallet1: "",
				Wallet2: "",
				Wallet3: "",
				Wallet4: "",
				Wallet5: "",
				Wallet6: "",
				Walletall: "",
				//键盘数据
				num1: 1,
				num2: 2,
				num3: 3,
				num4: 4,
				num5: 5,
				num6: 6,
				num7: 7,
				num8: 8,
				num9: 9,
				num0: 0,
				userPassword: [],
				clickinput: null,
			}
		},
		components: {
			"my-header": MyHeader,
			"pull-scroll": pullScroll
		},
		methods: {
			...mapMutations('wxh', [
				'USER_INFO',
				'ClEAR_SESSIONID',
				'LOGO_OUT',
				'LOGO_IN',
				'CLEAR_INFO',
				'RECORD_SESSIONID',
			]),
			//选择是哪个确认框
			clickinputfn(num) {
				this.clickinput = num
				if(this.walletStatus == 1) {
					if(this.oldkeyall.length < 6 && this.oldkeyall.length !== 0) {
						Toast({
							message: '旧密码未填写完整',
							duration: 2000,
							type: 'fail'
						});
						this.intle(3)
					} else if(num == 2 && this.keyall.length < 6 || num == 3 && this.keyall.length < 6 && this.keyall.length > 0) {
						Toast({
							message: '密码未填写完整',
							duration: 2000,
							type: 'fail'
						});
						this.intle(1)
					} else if(num == 1 && this.Walletall.length < 6 && this.Walletall.length !== 0 || num == 3 && this.Walletall.length) {
						Toast({
							message: '确认密码未填写完整',
							duration: 2000,
							type: 'fail'
						});
						this.intle(2)
					}
				} else if(this.walletStatus == 0) {
					if(this.keyall.length < 6 && this.keyall.length !== 0) {
						Toast({
							message: '密码未填写完整',
							duration: 2000,
							type: 'fail'
						});
						this.intle(1)
					} else if(num == 2 && this.keyall.length == 0 && this.Walletall.length < 6 || num == 1 && this.Walletall.length > 0) {
						Toast({
							message: '确认密码未填写完整',
							duration: 2000,
							type: 'fail'
						});
						this.intle(2)
					}
				}

				this.userPassword = []
			},
			changeMaxMoney(item) {
				this.$refs.pullscrollCover.showCover()
			},
			getaccount(msg) {
				this.account = msg;
				if(this.walletStatus == 0) {
					this.setKeyWallet()
					/*this.ajaxset(0)*/
				} else if(this.walletStatus == 1) {
					this.ajaxset(1)
				}
			},
			//关闭设置密码弹框
			closekeyWallet() {
				this.keyWallet = false
				this.intle()
			},
			//获取当前用户最小限额
			queryaccount() {
				var sessionId = localStorage.getItem('sessionId');
				let config = {
					url: window.api.customer_host + '/customer/getCustomer',
					method: 'GET',
					headers: {
						'sessionId': sessionId,
					},
				};
				axios(config).then((res) => {
					console.log(res,'999')
					this.account = res.data.data[0].moneyWithoutCode;
					this.walletStatus = res.data.data[0].walletStatus
				})

			},
			//获取最小限额列表
			getaccountlist() {
				let config = {
					url: window.api.base_host + '/baseDictionary/queryDictCodeByCode?code=MONEY_WITHOUT_CODE',
					method: 'GET',
					params: {
						enterpriseCode: api.enterpriseCode,
					},
				};
				axios(config).then((res) => {
					this.accountlist = res.data.data[0]
					// let AccountlistList = res.data.data[0] || []
					// let arr = []
					// for(let i=0;i<AccountlistList.length;i++){
					// 	if(AccountlistList[i].code==='1000') {
					// 		arr.push(AccountlistList[i])
					// 		this.accountlist = arr
					// 	}
					// }
				})
			},
			setKeyWallet() {
				if(this.walletStatus == 1) {
					this.clickinput = 3
				} else if(this.walletStatus == 0) {
					this.clickinput = 1
				}
				this.keyWallet = true;
				this.intle()
			},
			//初始所有密码
			intle(nan) {
				if(nan == 1) {
					this.userPassword = [];
					this.keyall = "";
					this.key1 = "";
					this.key2 = "";
					this.key3 = "";
					this.key4 = "";
					this.key5 = "";
					this.key6 = "";
				} else if(nan == 2) {
					this.userPassword = [];
					this.Walletall = "";
					this.Wallet1 = "";
					this.Wallet2 = "";
					this.Wallet3 = "";
					this.Wallet4 = "";
					this.Wallet5 = "";
					this.Wallet6 = "";
				} else if(nan == 3) {
					this.userPassword = [];
					this.oldkey1 = "";
					this.oldkey2 = "";
					this.oldkey3 = "";
					this.oldkey4 = "";
					this.oldkey5 = "";
					this.oldkey6 = "";
					this.oldkeyall = "";
				} else {
					this.userPassword = [];
					this.oldkey1 = "";
					this.oldkey2 = "";
					this.oldkey3 = "";
					this.oldkey4 = "";
					this.oldkey5 = "";
					this.oldkey6 = "";
					this.oldkeyall = "";
					//输入密码
					this.key1 = "";
					this.key2 = "";
					this.key3 = "";
					this.key4 = "";
					this.key5 = "";
					this.key6 = "";
					this.keyall = "";
					//确认密码
					this.Wallet1 = "";
					this.Wallet2 = "";
					this.Wallet3 = "";
					this.Wallet4 = "";
					this.Wallet5 = "";
					this.Wallet6 = "";
					this.Walletall = "";
				}
			},
			//渲染显示输入了密码
			passwordfn1() {
				if(/^[0-9]*$/g.test(this.keyall)) {
					let pwd = this.keyall.trim();
					this.key1 = pwd[0]
					this.key2 = pwd[1]
					this.key3 = pwd[2]
					this.key4 = pwd[3]
					this.key5 = pwd[4]
					this.key6 = pwd[5]
				} else {
					let arr = this.keyall.match(/\d/g);
					this.keyall = this.keyall.slice(0, this.keyall.lastIndexOf(arr[arr.length - 1]) + 1)
				}
			},
			passwordfn2() {
				if(/^[0-9]*$/g.test(this.Walletall)) {
					let pwd2 = this.Walletall.trim();
					this.Wallet1 = pwd2[0]
					this.Wallet2 = pwd2[1]
					this.Wallet3 = pwd2[2]
					this.Wallet4 = pwd2[3]
					this.Wallet5 = pwd2[4]
					this.Wallet6 = pwd2[5]
				} else {
					let arr2 = this.Walletall.match(/\d/g);
					this.Walletall = this.Walletall.slice(0, this.Walletall.lastIndexOf(arr2[arr2.length - 1]) + 1)
				}
			},
			passwordfn3() {
				if(/^[0-9]*$/g.test(this.oldkeyall)) {
					let pwd3 = this.oldkeyall.trim();
					this.oldkey1 = pwd3[0]
					this.oldkey2 = pwd3[1]
					this.oldkey3 = pwd3[2]
					this.oldkey4 = pwd3[3]
					this.oldkey5 = pwd3[4]
					this.oldkey6 = pwd3[5]
				} else {
					let arr3 = this.oldkeyall.match(/\d/g);
					this.oldkeyall = this.oldkeyall.slice(0, this.oldkeyall.lastIndexOf(arr3[arr3.length - 1]) + 1)
				}
			},
			successfn() {
				if(!this.oldkeyall && this.walletStatus == 1 || this.oldkeyall.length < 6 && this.walletStatus == 1) {
					Toast({
						message: '旧密码未填写完整',
						duration: 1000,
						type: 'fail'
					});
					this.intle(3)
					return
				}
				if(!this.account && this.walletStatus == 0) {
					Toast({
						message: '未设置最小免密金额',
						duration: 1000,
						type: 'fail'
					});
					return
				}
				if(!this.keyall || this.keyall.length < 6) {
					Toast({
						message: '密码未填写完整',
						duration: 1000,
						type: 'fail'
					});
					this.intle(1)
					return
				}
				if(!this.Walletall || this.Walletall.length < 6) {
					Toast({
						message: '确认密码未填写完整',
						duration: 1000,
						type: 'fail'
					});
					this.intle(2)
					return
				}
				if(!(this.keyall === this.Walletall)) {
					Toast({
						message: '密码不一致',
						duration: 1000,
						type: 'fail'
					});
					this.intle()
					return
				}
				if(this.walletStatus == 0) {
					this.ajaxset(0)
				} else if(this.walletStatus == 1) {
					this.ajaxset(1)
				}
				this.intle()
			},
			async ajaxset(num) {
				let dataparams = {}
				if(this.keyall && num == 0 && this.account) {
					dataparams = {
						walletPassword: MD5(this.keyall),
						moneyWithoutCode: this.account,
						walletStatus: num,
					}
				} else if(this.keyall && this.oldkeyall && num == 1 && this.account) {
					dataparams = {
						walletPassword: MD5(this.oldkeyall),
						newWalletPassword: MD5(this.keyall),
						moneyWithoutCode: this.account,
						walletStatus: num,
					}
				} else if(!this.keyall && num == 0) {
					Toast({
						message: '请设置密码',
						duration: 1000,
						type: 'success'
					});
					return
				} else if(!this.keyall && num == 1) {
					dataparams = {
						moneyWithoutCode: this.account,
						walletStatus: num,
					}
				}
				/*设置用户密码*/
				var sessionId = localStorage.getItem('sessionId');
				let config = {
					url: window.api.customer_host + '/customer/updateCustomerInfo',
					method: 'post',
					headers: {
						'sessionId': sessionId,
					},
					data: dataparams
				};
				await axios(config).then((res) => {
					if(res.data.returnCode === 0) {
						//设置失败；
						Toast({
							message: res.data.msg,
							duration: 2000,
							type: 'fail'
						});
						this.intle()
					}
					if(res.data.returnCode === 1) {
						Toast({
							message: "设置成功",
							duration: 2000,
							type: 'success'
						});
						//设置成功返回上一页；
						/*this.$router.go(-1);*/
						this.keyWallet = false
						this.walletStatus = 1
						this.getInfo();
						this.reFreshUserInfo(this);
					}
				})
			},
			//随机键盘
			shuffle(a) {
				var b = a.sort(function() {
					return .5 - Math.random();
				})
				this.num1 = b[0];
				this.num2 = b[1];
				this.num3 = b[2];
				this.num4 = b[3];
				this.num5 = b[4];
				this.num6 = b[5];
				this.num7 = b[6];
				this.num8 = b[7];
				this.num9 = b[8];
				this.num0 = b[9];
			},
			getArr(doms) {
				var arr = [];
				if(doms.length) {
					for(let j = 0; j < activeDiv.length; j++) {
						arr.push(doms[j])
					}
				} else {
					arr.push(doms)
				}
				return arr;
			},
			//键盘删除键
			deletPassword() {
				this.userPassword.splice(this.userPassword.length - 1, 1);
				if(this.clickinput == 1) {
					this.keyall = this.userPassword.join().replace(/,/g, '');
					this.passwordfn1(); // 密码框显示
				} else if(this.clickinput == 2) {
					this.Walletall = this.userPassword.join().replace(/,/g, '');
					this.passwordfn2(); // 密码框显示
				} else if(this.clickinput == 3) {
					this.oldkeyall = this.userPassword.join().replace(/,/g, '');
					this.passwordfn3(); // 旧密码显示
				}
				console.log(this.userPassword);
			},
			//键盘开始
			getNum(e) {
				var mydiv = e.target;
				this.getArr(mydiv).addClass('lp');
				var that = this;
				if(this.userPassword.length < 6) {
					this.userPassword.push(e.target.innerHTML);
				}
				if(this.clickinput == 1) {
					this.keyall = this.userPassword.join().replace(/,/g, '');
					this.passwordfn1(); // 密码框显示
				} else if(this.clickinput == 2) {
					this.Walletall = this.userPassword.join().replace(/,/g, '');
					this.passwordfn2(); // 密码框显示
				} else if(this.clickinput == 3) {
					this.oldkeyall = this.userPassword.join().replace(/,/g, '');
					this.passwordfn3(); // 旧密码显示
				}
				var time1 = setTimeout(function() {
					that.getArr(mydiv).removeClass('lp');
					console.log("22222222222")
					window.clearTimeout(time1);
				}, 50)
				console.log(e.target.innerHTML);
				console.log(this.userPassword);
			},
			togClass() {
				Array.prototype.addClass = function(myclass) {
					console.log(this, 'mydiv')
					for(let i = 0; i < this.length; i++) {
						let flag = this[i].className.indexOf(myclass);
						if(flag < 0) {
							this[i].className += ' ' + myclass;
						}
					}
				}
				Array.prototype.removeClass = function(myclass) {

					for(let i = 0; i < this.length; i++) {
						let flag = this[i].className.indexOf(myclass);
						if(flag > 0) {
							var str = this[i].className.replace(myclass, '');
							this[i].className = str;
						}
					}
				}
			},
			async getInfo() {
				let res = await getUserInfoAgain(this.$store.getters['wxh/sessionId']);
				if(res.status === 200) {
					if(res.data.returncode === 0 || res.data.returnCode === 0) {
						// Toast({
						//   message: res.data.msg || '无数据！',
						//   type: 'fail',
						//   duration: api.alertTime_2
						// });
						this.LOGO_OUT(false);
						return
					}
					this.USER_INFO(res.data.data[0]);
					this.LOGO_IN(true);
				} else {
					Toast({
						message: '网络错误！',
						type: 'fail',
						duration: api.alertTime_2
					});
					this.LOGO_OUT(false);
					return
				}
			}
		},
		computed: {
			...mapGetters('wxh', [
				'userInfo'
			]),
			zxPageHeight() {
				return window.screen.height;
			},
			zxPageWidth() {
				return window.screen.width;
			},
			xxyPageHeight() {
				if(this.walletStatus == 0) {
					return 12;
				} else if(this.walletStatus == 1) {
					return 14.5;
				}

			},

		},
		watch: {

		},
		created() {
			this.togClass();
		},
		mounted() {
			this.queryaccount()
			this.getaccountlist()
		},
	}
</script>

<style>
	.SetKeyWallet .keyWallet {
		position: fixed;
		top: 0px;
		height: 100%;
		width: 100%;
		z-index: 1000;
		touch-action: none;
	}
	
	.SetKeyWallet .keyWallet .keyWalletmask {
		width: 100%;
		height: 100%;
		background: #000;
		opacity: 0.7;
	}
	
	.SetKeyWallet .keyWallet .keyWalletcontant {
		position: absolute;
		width: 82%;
		/*height: 12rem;*/
		left: 0;
		right: 0;
		top: -8rem;
		bottom: 0;
		margin: auto;
		z-index: 3;
		background-color: #fff;
		border-radius: 0.5rem;
	}
	
	.SetKeyWallet .keyWallet .title {
		text-align: left;
		padding-left: 0.5rem;
		padding-bottom: 0.3rem;
		margin-top: 0.3rem;
		border-bottom: 1px solid #ddd;
	}
	
	.SetKeyWallet .keyWallet .solid {
		display: inline-block;
		border-bottom: 1px solid #ddd;
		width: 13rem;
	}
	
	.SetKeyWallet .keyWallet .sure {
		display: inline-block;
		margin-top: 0.8rem;
		width: 3rem;
		height: 1.4rem;
		line-height: 1.4rem;
		border-radius: 0.2rem;
		background-color: #EF5423;
		color: #fff;
	}
	
	.SetKeyWallet .keyWallet .keydiv p {
		margin: 0.1rem 0rem;
	}
	
	.SetKeyWallet .keyWallet .keydiv .srinput {
		position: relative;
		/*width: 13rem;*/
		height: 2rem;
		margin: 0 auto;
	}
	
	.SetKeyWallet .keyWallet .keydiv .srinput .maxinput {
		position: absolute;
		width: 100%;
		height: 2rem;
		z-index: 3;
		top: 0px;
		left: 0px;
		opacity: 0;
	}
	
	.SetKeyWallet .keyWallet .keydiv .srinput .mininput {
		position: absolute;
		width: 100%;
		height: 2rem;
		z-index: 1;
		top: 0px;
		left: 0px;
	}
	
	.SetKeyWallet .keyWallet .keydiv .mininput input {
		border: 1px solid #ddd;
		display: inline-block;
		padding-left: 0.8rem;
		width: 38px;
		height: 38px;
	}
	
	.SetKeyWallet .closekeyWallet {
		display: inline-block;
		width: 1.2rem;
		height: 1.2rem;
		position: absolute;
		top: -1.2rem;
		right: -0.5rem;
		border: 1px #ccc solid;
		border-radius: 1rem;
		background-color: #fff;
	}
	/*假键盘样式*/
	
	.SetKeyWallet .keyWallet .myBox {
		position: absolute;
		bottom: 0;
		transition: 0.3s;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		transform: height 2s;
		background: #fff;
	}
	
	.SetKeyWallet .keyWallet .myBox div {
		width: 33.3%;
		height: 2.5rem;
		text-align: center;
		line-height: 2.5rem;
		border-left: 1px solid #d2d2d2;
		border-top: 1px solid #d2d2d2;
		border-spacing: 0px;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}
	
	.SetKeyWallet .keyWallet .myBox span div:last-child {
		border-right: 1px solid #d2d2d2;
	}
	
	.SetKeyWallet .keyWallet .myBox span {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	
	.SetKeyWallet .keyWallet .zxsure {
		border-left: 0;
		background: #F2F2F2;
	}
	
	.SetKeyWallet .keyWallet .del {
		border-right: 0;
		background: #F2F2F2;
	}
	
	.SetKeyWallet .keyWallet .lp {
		background: black;
		opacity: 0.3;
	}
</style>